<template>
    <div id="topicdetail">
        <div class="header">
            <van-nav-bar title="分类详情" left-text="返回" left-arrow @click-left="onClickLeft" />
        </div>
        <div class="content">
            <div class="detail" v-if="contentinfo">
                <div class="box" v-html="contentinfo"></div>
            </div>
        </div>
        <div class="list">
            <p class="title">专题推荐</p>
            <div class="item" v-for="(item,index) in recommendList" :key="index">
                <img :src="item.scene_pic_url" alt />
                <p class="info">{{item.title}}</p>
            </div>
        </div>
    </div>
</template>
<script>
import { detailaction } from "@/api/topic";
export default {
    data() {
        return {
            id: "",
            contentinfo: "",
            recommendList: "",
        };
    },
    created() {
        this.id = this.$route.query.id;
        this.getListData();
    },
    methods: {
        onClickLeft() {
            this.$router.go(-1);
        },
        async getListData() {
            let data = await detailaction({
                id: this.id,
            });
            console.log(data);
            this.contentinfo = data.data.content;
            this.recommendList = data.recommendList;
        },
    },
};
</script>
<style lang="scss">
#topicdetail {
    width: 100%;
    border-top: 1px solid transparent;
    background: #f4f4f4;
    font-size: 0.32rem;
    padding-bottom: 1.333333rem;
    .header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 999;
    }
    .content {
        width: 100%;
        height: calc(100% - 1.24rem);
        margin-top: 1.22667rem;
        overflow: auto;
        .detail {
            width: 100%;
            .box {
                width: 100%;
                img {
                    width: 100%;
                    display: block;
                }
            }
        }
    }
    .list {
        width: 9.2rem;
        height: auto;
        margin: 0 0.4rem;
        .title {
            text-align: center;
            background: #f4f4f4;
            font-size: 0.4rem;
            color: #999;
            padding: 0.4rem 0;
        }
        .item {
            width: 100%;
            padding: 0.32rem 0.32rem 0.4rem 0.32rem;
            margin-bottom: 0.4rem;
            background: #fff;
            box-sizing: border-box;
            img {
                height: 3.70667rem;
                width: 8.56rem;
                display: block;
            }
            .info {
                display: block;
                margin-top: 0.4rem;
                font-size: 0.37333rem;
                text-align: left;
                background: #fff;
            }
        }
    }
}
</style>